<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style>
		.test{
			color: red;
		}
	</style>
	<script src="./js/jquery-3.2.1.min.js"></script>
	<link rel="stylesheet" href="./css/demo.css" />
	<script>
			$(document).ready(function(){
				// alert("abcdef")
			})
			$(function(){
				// alert("abcdef")
			})
			function test(){
				alert("test")
			}
			function test2(){
				var obj = $("#testDiv").html()
				alert(obj)
			}
			// $(test2)
			// $(function click(){
			// 	// $("#testShowAndHide").mouseleave(function(){
			// 	// 	alert("离开")
			// 	// })
			// 	// $("#testShowAndHide").mouseenter(function(){
			// 	// 	alert("进入")
			// 	// })
			// 	$("#click").click(function(){
			// 		$(this).addClass("test")
			// 		$("#testShowAndHide").removeClass("test")
			// 	})
			// })
			$(function(){
				$("#clickShow").click(function(){
					// $("#show").show(2000)
					// $("#show").fadeIn(2000)
					$("#show").slideDown(2000)
					// $("#show").animate({position:'relative','margin-left':'300px'},2000)
				})
			})
			$(function(){
				$("#clickHide").click(function(){
					// $("#show").hide(2000)
					// $("#show").fadeOut(2000)
					// $("#show").slideUp(2000)
					$("#show").animate({position:'relative','margin-left':'-500px'},2000)
				})
			})
			// $(function imgZoom(){
			// 	$w = $("img").width()
			// 	$h = $("img").height()
			// 	$w2 = $w+30
			// 	$h2 = $h+30
			// 	$("img").mouseenter(function(){
			// 		$("img").stop().animate({height:$h2,width:$w2,left:"-10px",top:"-10px"})
			// 	}).mouseleave(function(){
			// 		$("img").stop().animate({height:$h,width:$w,left:"0px",top:"0px"})
			// 	})
			// })
	</script>
</head>
<body>
<!-- 	<div id="parent">
		<span id="userName" name ="lala">boss2</span>
		<span id="userName" name ="lala">boss1</span>
		<span id="userName" name ="lala">boss4</span>
		<span id="userName" name ="lala">boss3</span>
		<span id="delNumber" onclick ="delNum()">-</span>
		<span id="number">5</span>
		<span id="addNumber" onmousedown ="addNum()">+</span>
		<input id="inputText"  type="text" onfocus="myOnfocus()" onblur="myOnblur()" placeholder=""/ value="" ><br />
		<textarea id="textArea" maxlength="100"cols="20" rows="10" value="" onkeyup="count()"></textarea>
		<br />
		你已输入<span id="hadInput" style="color:red">0</span>个字符，还能输入<span id="canInput" style="color:blue">10</span>个字符

		<span id="testShowAndHide" class="test" onmouseover="showDiv()" onmouseout="hideDiv()" style="font-weight: 800"><br />测试显示和隐藏</span>
		<div id="testDiv" style="display:none">在显示与隐藏间切换</div>
		<div id="clickShow" >点击出现</div>
		<div id="clickHide" >点击隐藏</div>
		<div id="show" style="display:none;background: red;height: 300px;width: 400px;"></div>
		<div style= "overflow: hidden;position: relative;width: 320px;height: 200px;"">
			<img style= "position: absolute;left: 0px;top: 0px;width: 320px;" src="./images/2017-09-14_092025.gif" alt="" />
		</div>

	</div> -->

	<div id="box">
		<ul id="img_box" onclick="choose('哈哈',44)">
			<li><img src="./images/secb_links_1.png" alt="" /></li>
			<li><img src="./images/secb_links_2.png" alt="" /></li>
			<li><img src="./images/secb_links_3.png" alt="" /></li>
			<li><img src="./images/secb_links_4.png" alt="" /></li>
			<li><img src="./images/secb_links_1.png" alt="" /></li>
			<li><img src="./images/secb_links_2.png" alt="" /></li>
		</ul>
		<span id="hui"></span>
		<ul id="num_box">
			<li class="red">1</li>
			<li class="blue">2</li>
			<li class="blue">3</li>
			<li class="blue">4</li>
			<li class="blue">5</li>
			<li class="blue">6</li>
		</ul>		
	</div>
	<script>
		// var obj = document.getElementsByTagName("span")
		// for (var i = 0; i <obj.length; i++) {
		// 	if(obj[i].innerText !="boss4"){
		// 		obj[i].innerText ="admin"+(i+1)
		// 	}
		// }
		function delNum(){
			var obj_delNumber = document.getElementById("number")
			if(obj_delNumber.innerText > 1){
				obj_delNumber.innerText = obj_delNumber.innerText - 1
			}
		}
		function addNum(){
			var obj_delNumber = document.getElementById("number")
			obj_delNumber.innerText = Number(obj_delNumber.innerText) + 1
		}
		window.onload=function onload() {
			// var o = new Object()
			// o.name = "boss"
			// o.sayFunction = function(){return "hello"}
			
			// alert(o.name)
			// alert(o.sayFunction())
			// var table={
			// 	name : "haha",
			// 	age : "70",
			// 	func_showMsg : function(){
			// 		alert(table.name+table.age)
			// 	}
			// }
			// table.func_showMsg()
 
			// var MyObj = function(){
			// 	var o ={}
			// 	o = this
			// 	o.name = "admin"
			// 	o.age = 50
			// 	o.showMsg = function(){
			// 		alert(o.name+o.age)
			// 	}
			// 	o.subAvgStr = function(x){
			// 		alert(x.substr(x.length/2)) 
			// 	}
			// }
			// var obj = new MyObj()
		}
		// $(function myOnfocus(){
		// 	$("#inputText")
		// 	$("#inputText").attr("placeholder",""请输入密码："")
		// })
		function myOnblur(){
			document.getElementById("inputText").placeholder=""
		}
		function count(){
			var obj = document.getElementById("textArea")
			document.getElementById("hadInput").innerText=obj.value.length
			document.getElementById("canInput").innerText=100-obj.value.length
		}
		function showDiv(){
			var obj = document.getElementById("testDiv")
			obj.style.display="block"
			obj.className = "test"
		}
		function hideDiv(){
			var obj = document.getElementById("testDiv")
			obj.style.display="none"
		}
		function hideStr(){
			var x = document.getElementById("testDiv").innerText
			if(x.length>6){
				x= x.substr(0,6) + "..."
			}
			document.getElementById("testDiv").innerText = x
		}
		function sub(){
			var arr= new Array("a","b","c")
			arr.push("d")
			arr.push("e")
			arr.pop()
			alert(arr)
		}
		function change(i){
			$("#img_box li").eq(i).css('display','block').siblings().css('display','none')
			$("#num_box li").eq(i).removeClass().addClass("red").siblings().removeClass().addClass("blue")
		}
		var i=0
		var t
		function loop(){
			if(i>5){i=0}
			change(i)
			t=setTimeout("loop()",1000)
			i++
		}
		function mouseEnter(){
			$("#num_box li").mouseenter(function(){
				i=$(this).index()
				change(i)
				clearTimeout(t)
			}).mouseleave(function(){
				loop()
			})
			$("#img_box li").mouseenter(function(){
				i=$(this).index()
				change(i)
				clearTimeout(t)
			}).mouseleave(function(){
				loop()
			})			
		}
		loop()
		mouseEnter()

		function choose(a,b){
			alert(a)
		}
	</script>
</body>
</html>